<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/index.css" type="text/css">
    <title>网页布局</title>
</head>

<body>
    <div class="header">
        <div class="LOGO">LOGO</div>
        <div class="setting">
            <div>
                <img src="./img/setting-fill.png">
                <img src="./img/bell-fill.png">
            </div>
            <div class="LOGOUT">Log Out</div>
        </div>
    </div>
    <div class="main">
        <div class="navigator">
            <div class="nav_left">
                <h2>Audience Overview</h2>
                <span>Roseville,CA</span>
            </div>
            <ul class="nav_right">
                <li class='selected'>DASHBOARD</li>
                <li>PROJECTS</li>
                <li>CALENDAR</li>
                <li>MAILBOX</li>
                <li>SETTINGS</li>
                <div class="line"></div>
            </ul>
        </div>

        <div id="Swiper">
            <div id="container">
                <ul id="list">
                    <li class="list-item">
                        <img src="img/4.png" alt="图片4" />
                    </li>
                    <li class="list-item">
                        <img src="img/1.png" alt="图片1" />
                    </li>
                    <li class="list-item">
                        <img src="img/2.png" alt="图片2" />
                    </li>
                    <li class="list-item">
                        <img src="img/3.png" alt="图片3" />
                    <li>
                    <li class="list-item">
                        <img src="img/4.png" alt="图片4" />
                    <li>
                    <li class="list-item">
                        <img src="img/1.png" alt="图片1" />
                    <li>
                        <!-- 方便实现无缝衔接跳转 -->
                </ul>
                <div id="buttons">
                    <span index="1" class="active"></span>
                    <span index="2"></span>
                    <span index="3"></span>
                    <span index="4"></span>
                </div>
                <a href="javascript:;" id="prev" class="arrow">&lt;</a>
                <a href="javascript:;" id="next" class="arrow">&gt;</a>
            </div>
        </div>

        <div class="listdetail">
            <div class='listdetail-top'>
                <h2>Support Requests</h2>
                <p class="View-All">View All</p>
            </div>
            <hr>
            <div class="listdetail-bottom">
                <table width="100%" class="table">
                    <tr>
                        <th width="25%">TIME</th>
                        <th width="25%">USERNAME</th>
                        <th width="50%" align="right">STATUS</th>
                    </tr>

                    <tr>
                        <td><b>9:45pm</b></td>
                        <td><b>Info@deslgn.com</b></td>
                        <td align="right">
                            <p class="Solved">Solved</p>
                        </td>
                    </tr>
                    <tr>
                        <td><b>9:45pm</b></td>
                        <td><b>Info@deslgn.com</b></td>
                        <td align="right">
                            <p class="Solved">Solved</p>
                        </td>
                    </tr>

                </table>
            </div>

        </div>

        <div class=" Chart" id="Chart">曲线图</div>
        <div class="PieChart" id="PieChart">饼状图</div>
        <div class="Histogram" id="Histogram">柱状图</div>
    </div>
    <div class="footer">
        <div class="LOGO">LOGO</div>
        <div class="footer_ul_1">
            <ul>
                <li>NEWS</li>
                <li>CHANNELS</li>
                <li>OVERVIEW</li>
                <li>TIMELINE</li>
            </ul>
        </div>
        <div class="footer_ul_2">
            <ul>
                <li>SPORT</li>
                <li>CULTURE</li>
                <li>NATURE</li>
                <li>MUSIC</li>
            </ul>
        </div>
        <div class="footer_ul_3">
            <ul>
                <li>WEATHER</li>
                <li>AUTOS</li>
                <li>LOCAL</li>
                <li>SHOP</li>
            </ul>
        </div>
        <div class="footer_ul_4">
            <ul>
                <li>FUTURE</li>
                <li>FOOD</li>
                <li>EARTH</li>
                <li>TV</li>
            </ul>
        </div>
        <div class="footer_ul_5">
            <ul>
                <li>TRAVEL</li>
                <li>RADIO</li>

            </ul>
        </div>
    </div>

    <script src="./js/navigator.js"></script>;
    <script src="./js/swiper.js"></script>;
    <script src="./js/echarts.js"></script>;
    <script src="./js/requireData.js"></script>
</body>

</html>